<template>
  <div class="leftContent">
    <left-top/>
    <left-bottom/>
    <!-- <div class="divStyle divItem-1">
      <item-card-title title-name="预警信息" />
    </div>
    <div class="divStyle divItem-2">
      <item-card-title title-name="实时工区在场人数分布" />
         <dv-charts :option="optionTest"/>

    </div>
    <div class="divStyle divItem-3">
      <item-card-title title-name="劳务队伍在场人数" />
        <dv-charts :option="optionTest2"/>

    </div> -->
  </div>
</template>

<script>
import { getProTypeExce } from '@/api/interface'
import itemCardTitle from './itemCardTitle'
import leftTop from './leftTop'
import leftBottom from './leftBottom'

export default {
  name: 'leftContent',
  components: {
    itemCardTitle,
    leftTop,
    leftBottom
  },
  data () {
    return {
      optionTest: {},
      optionTest2: {}
    }
  },
  mounted () {
    this.cerat()
  },
  methods: {
    cerat () {
      this.optionTest = {
        legend: {
          data: ['人数', '车辆数'],
          top: 20,
          left: 150,
          itemGap: 40,
          iconWidth: 5,
          iconHeight: 5,
          textStyle: {
            fontSize: 12,
            fill: '#95CFEC'
          },
          icon: 'rect',
          iconStyle: {
            width: 6,
            height: 6
          }
        },

        xAxis: {
          data: ['队伍一', '队伍二', '队伍三', '队伍四'],
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: '数量(个)',
          data: 'value',
          show: true,
          nameTextStyle: {
            fill: '#95CFEC',
            fontSize: 12
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 10,
              rotate: 0
            }
          },
          splitLine: {
            show: false
          }
        },

        series: [
          {
            name: '人数',
            color: '#F2B849',
            data: [120, 223, 190, 210],
            type: 'bar',
            barStyle: {
              fill: '#FDB629'
            }
          },
          {
            name: '车辆数',
            color: '#6FD8E8',
            data: [120, 23, 190, 210],
            type: 'bar',
            barStyle: {
              fill: '#6FD8E8'
            }
          }
        ]
      }

      this.optionTest2 = {
        legend: {
          data: ['在线人数', '总人数'],
          top: 20,
          left: 150,
          itemGap: 40,
          iconWidth: 5,
          iconHeight: 5,
          textStyle: {
            fontSize: 12,
            fill: '#95CFEC'
          },
          icon: 'rect',
          iconStyle: {
            width: 6,
            height: 6
          }
        },

        xAxis: {
          data: ['队伍一', '队伍二', '队伍三', '队伍四'],
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 12
            }
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: '人数(人)',
          data: 'value',
          show: true,
          nameTextStyle: {
            fill: '#95CFEC',
            fontSize: 12
          },
          axisLine: {
            show: true,
            style: {
              stroke: '#95CFEC',
              lineWidth: 0.5
            }
          },
          axisLabel: {
            style: {
              fill: '#95CFEC',
              fontSize: 10,
              rotate: 0
            }
          },
          splitLine: {
            show: false
          }
        },

        series: [
          {
            name: '在线人数',
            color: '#F2B849',
            data: [120, 223, 190, 210],
            type: 'bar',
            barStyle: {
              fill: '#FDB629'
            }
          },
          {
            name: '总人数',
            color: '#6FD8E8',
            data: [120, 223, 190, 210],
            type: 'bar',
            barStyle: {
              fill: '#6FD8E8'
            }
          }
        ]
      }
    }

  }

}
</script>

<style scoped lang="less">
.leftContent {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;

  .divStyle {
    opacity: 0.76;
    background-image: linear-gradient(90deg, #0e1451 0%, #151643 100%);
    border: 1px solid #5f72c2;
    box-shadow: inset 0 0 10px 0 #556ac3;
    border-radius: 6px;
    background: #09104a;
  }
  .divItem-1 {
    width: 100%;
    height: 39%;
  }
  .divItem-2 {
    width: 100%;
    height: 27%;
  }
  .divItem-3 {
    width: 100%;
    height: 27%;
    overflow: hidden;
  }

}
</style>
